<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <span v-if="result==true">
    <label for="username">用户账号：</label>
<!--key 可以解决input复用的问题 可以让显示在username的值在切换时不会显示到email中-->
  <input type="text" placeholder="请输入用户账号" id="username" key="username"></span>
  <span v-else-if="result==false">
    <label for="email">邮箱登录：</label>
  <input type="email" placeholder="请输入用户邮箱" id="email" key="email"></span>
  <span v-else>输入方式错误</span>
  <button @click="btnClick">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      type:true,
    },
    methods:{
      btnClick(){
        this.type=!this.type
      }
    },
    computed:{
      result(){
        return this.type
      }
    }
  })
</script>

</body>
</html>